<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        /*标签选择器, 会选择所有相同的标签*/
        h1{
            color: #37d559;
        }
        p{
            font-size: 30px;
        }
        /*类选择器, 格式为.className。可以自己把多个标签归类到同一个类别中, 统一处理
        不同类别的标签可以是同一个类, 这里的类更多的是一种人为的分类*/
        .ray1{
            color: red;
        }
        .ray2{
            color: aqua;
        }
        /*id选择器, 格式为#idName。html中id必须全局唯一
        用于在html中精准定位一个元素, 仅针对这个id进行修改*/
        #id1{
            color: blueviolet;
        }
    </style>
</head>
<body>
<h1>111</h1>
<h1>112</h1>
<p>222</p>

<h1 class="ray1">c111</h1>
<h1 class="ray2">c112</h1>
<h1 class="ray1">c113</h1>
<p class="ray1">c114</p>

<h1 id="id1">id1</h1>
<h1 id="id2">id2</h1>
<h1>id3</h1>
<h1>id4</h1>
<h1>id5</h1>
</body>
</html>